<template>
  <el-form :model="form" :rules="rules" ref="ruleFormRef" status-icon :label-position="labelPosition" label-width="120px"
    :inline="true" class="demo-form-inline">
    <el-form-item label="项目名称" prop="projectName">
      <el-input maxlength="50" v-model="form.projectName"  show-word-limit  />
    </el-form-item>

    <el-form-item label="申报单位" prop="applyUnitName">
      <popup-tree-input
        :data="data.popupTreeData"
        :props="data.popupTreeProps"
        :prop=" form.applyUnitName"
        :node-key="'' + deptForm.parentId"
        :current-change-handle="handleTreeSelectChange"
        />
    </el-form-item>

    <el-form-item label="建设预算(万元)" prop="buildBudget">
      <el-input maxlength="50" v-model="form.buildBudget" />
    </el-form-item>

    <el-form-item label="建设目标" style="width: 100%">
      <el-input v-model="form.buildTarget" :autosize="{ minRows: 2 }" maxlength="100"  show-word-limit  type="textarea"
        placeholder="请输入" />
    </el-form-item>

    <el-form-item label="建设内容" style="width: 100%">
      <el-input v-model="form.buildContent" :autosize="{ minRows: 2 }" maxlength="100" show-word-limit  type="textarea"
        placeholder="请输入" />
    </el-form-item>

    <el-form-item label="需求部门意见" style="width: 100%">
      <el-input v-model="form.needDeptSuggest" :autosize="{ minRows: 2 }" maxlength="100" show-word-limit  type="textarea"
        placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import { ref, reactive, computed, watch ,onMounted } from 'vue'
// import SelectOption from '@/views/science/components/selectOption/index.vue'
import { useStore } from 'vuex'
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue'
import { getOrgTree } from '@/views/system/api/org'
export default {
  components: {
    // SelectOption,
    PopupTreeInput
  },
  emits: {
    valueFlag: null,
  },
  props: {
    detailForm: {
      type: Object,
      required: false,
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    const labelPosition = ref('right')
    const deptForm = {
      parentId: 0,
      parentName: '',
    }
    const data = reactive({
      levelOptions: computed(() => store.state.innovativeTalents.cxlevelSelect),
      typeOptions: [],
      // orgAllList: computed(() => store.state.technologyStrength.orgAllList), //申报单位
      popupTreeProps: {
        label: 'name',
        children: 'children',
      },
      popupTreeData: [],
      dictCatalog: [],
      tableTreeData: [
        {
          children: [],
          // dictName: $i18n.t('message.dict.top'),
          dictName:'',
          id: undefined,
        },
      ],
      constructSelect:[],
    })

    const form = reactive(store.state.innovativeTalents.talentTeamInfo)
    watch(form, (newValue, oldValue) => {
      console.log('newValue, oldValue',newValue, oldValue);
      store.commit('innovativeTalents/getTalentTeamInfo', { ...form })
    });

    if(form.teamLevelId){
      data.levelOptions.map((item)=>{
        if(item.itemValue == form.teamLevelId){
          data.typeOptions = item.children
        }
      })
    }

    const changeValue = (item) => {
      form.applyUnitName = item.name
      form.applyUnit = item.id
    }

    // 申报单位
    const handleTreeSelectChange = (data)=> {
      form.applyUnit = data.id
      form.applyUnitName = data.name
    }

    const rules = reactive({
      projectName: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
      ],
      applyUnitName: [
        { required: true, message: '请选择申报单位', trigger: 'change', },
      ],
      buildBudget: [
        { required: true, message: '请选择建设预算', trigger: 'change', },
      ],
    })

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        console.log(fields);

        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }

    const findTreeData = async ()=>{
      let res = await  getOrgTree()
        data.dictCatalog = res.data.data
        data.tableTreeData = data.dictCatalog
        console.log(data.dictCatalog,'data.dictCatalogdata.dictCatalogdata.dictCatalog');
        // data.defaultExpandedKeys = data.dictCatalog.map((item) => item.id)
        //获取上级机构
        data.popupTreeData = res.data.data

        data.constructSelect = res.data.data
    }


    onMounted(() => {
      findTreeData()
      if(props.detailForm){
        // console.log('onMounted',props.detailForm);
        // form.applyUnit = store.state.innovativeTalents.talentTeamInfo.applyUnit
        console.log('mounted',store.state.innovativeTalents.talentTeamInfo.applyUnit);
      }
    });

    watch(form, (newValue, oldValue) => {
      store.commit('innovativeTalents/getTalentTeamInfo', { ...form })
    });

    return {
      findTreeData,
      labelPosition,
      data,
      form,
      rules,
      ruleFormRef,
      submitForm,
      changeValue,
      deptForm,
      handleTreeSelectChange,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}
</style>
